<template>
  <!-- 绑定对象 -->
  <p :class="{active: isActive}">Hello World</p>
  <p :class="difineClass">Hello World</p>
  <!-- 绑定数组 -->
  <p :class="[activeClass ]">Hello World</p>
  <!-- 数组嵌套对象 -->
  <p :class="[{'active':isActive} ]">Hello World</p>

  <!-- <myComponent :class="[{'active':isActive}]" /> -->

  <p :style="{color:isRed}">Hello World</p>

  <p :style="difineStyle">Hello World</p>

  <p :style="[difineStyle]">Hello World</p>
</template>

<script setup>
  import { reactive, ref } from "vue";
  import myComponent from "@/views/basic1/compontens/myComponent";

  const isActive = ref(true);
  const difineClass = reactive({
    active: true,
  });
  const activeClass = ref("active");
  const isRed = ref("red");
  const difineStyle = reactive({
    color: "red",
  });
</script>

<style lang="scss" scoped>
  .active {
    color: red;
  }
</style>